<div class="container">
<nav class="navbar navbar-default navbar-inverse">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="">
            <img alt="PyRaspControl" src="../static/images/raspcontrol.png"
                 class="navbar-brand-logo">
            <span class="navbar-brand-label">PyRaspControl</span>
        </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-routes">
            <li {% if page == 'index' %} class="active" {% endif %}>
                <a href="/">
                    <img src="../static/images/icons/home.png" class="navbar-icon"> Home</a>
            </li>
            <li {% if page == 'services' %} class="active" {% endif %}>
                <a href="/services">
                    <img src="../static/images/icons/services.png" class="navbar-icon"> Services</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="#">
                    <img src="../static/images/icons/restart.png" class="navbar-action">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../static/images/icons/shutdown.png" class="navbar-action">
                </a>
            </li>
        </ul>
    </div>
</nav>
</div>
